<template>
  <div>
    <proTable class="no-card" ref="tableRef" @reset="reset" :columns="columns" :pagination-init="paginationInit"
      :pagination-fields="paginationFields" :request-api="getTableList" :data-callback="dataCallback"
      :init-param="initParam" :toolButton="['refresh', 'search','setting']">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" plain :icon="Plus" @click="editFn">新增</el-button>
      </template>
      <!-- 表格 toolButton 按钮 -->
      <template #toolButton="scope">
        <el-button type="primary" plain>toolButton 按钮</el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" text @click="handleEdit(scope.row)">详情</el-button>
        <el-button type="primary" text @click="editFn('编辑',scope.row)">编辑</el-button>
      </template>
    </proTable>
    <formDialog ref="formDialogRef" @updata="updata" />
  </div>

</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
// import {proTable} from "../packages/index";
import { getUserGender } from "./api/test";
import api from "./api";
import formDialog from "./dialog/form.vue";
const tableRef = ref();

// 表格初始参数
const initParam = reactive({
  init: 40,
});

// 分页初始值 - 字段名与 paginationFields 对应
const paginationInit = {
  pageNum: 2,                 // 页码值 - 字段名与 paginationFields.page 对应
  pageSize: 25,           // 条数值 - 字段名与 paginationFields.size 对应
};

// 分页字段映射 - 告诉后端使用什么字段名
const paginationFields = {
  page: 'pageNum',             // 后端使用 'xx' 作为页码字段名
  size: 'pageSize',       // 后端使用 'pageSize' 作为条数字段名
  total: 'total',         // 后端使用 'total' 作为总数字段名
  list: 'list'            // 后端使用 'list' 作为列表字段名
};

// 数据处理回调：将后端返回的数据转换为组件期望的格式
const dataCallback = (data) => {
  return {
    [paginationFields.list]: data.list,    // 数据列表
    [paginationFields.total]: 200,         // 总条数
  };
};
const getTableList = (params) => {
  // 处理日期范围参数
  if (params.timekey) {
    params.startCreateTime = params.timekey[0];
    params.endCreateTime = params.timekey[1];
    delete params.timekey;
  }

  console.log('发送请求参数:', params);

  return api.post(
    `https://mock.mengxuegu.com/mock/66eba4df90f5322f879d8359/api/query/dailyReport`,
    params,
    { loading: true }
  );
};

// 更新数据
const updata = () => {
  tableRef.value.getTableList();
};

// 表格配置项
const columns = [
  { label: "ID", prop: "id" },
  {
    label: "日期",
    prop: "date",
    align: "left",
    search: {
      el: "date-picker", //element组件 或者使用 render自定义
      span: 1, // grid 占位大小
      key: "timekey", // 字段名 不填则使用 列的 prop值
      label: "日期时间", // 如果不填 者显示列名
      showLabel: true, // 是否显示Label
      props: {
        //组件props
        clearable: true,
        type: "datetimerange",
        valueFormat: "YYYY-MM-DD HH:mm:ss",
      },
    },
  },
  {
    label: "注册人数", prop: "registerNum",
  },
  {
    label: "性别", prop: "gender",
    enum: getUserGender,
    // 字典数据（本地数据）
    // enum: [{
    //   label: '222',
    //   value: '333'
    // }],
    // 字典请求不带参数
    // enum: getUserGender,
    // 字典请求携带参数
    // enum: () => getUserGender({ id: 1 }),
    search: { el: "select" }
  },
  { label: "开卡成功数", prop: "activateCard", search: { el: "input", defaultValue: '6666' } },

  {
    prop: "operation",
    label: "操作",
    align: "left",
    width: 180,
  },
];


const formDialogRef = ref();
const editFn = (title, row) => {
  formDialogRef.value.show('title', row);
};

const reset = (e) => {
  // 重置搜索表单时更新默认值
  columns[3].search.defaultValue = '888';
  console.log('重置搜索表单');
};

const handleEdit = (row) => {
  console.log('编辑行数据:', row);
};
</script>
<style lang="scss">
@use "./styles/element.scss";
</style>
